import React, { PureComponent } from 'react';
import { Modal, List, InputItem, WhiteSpace, Button, WingBlank, Menu, ActivityIndicator, NavBar, TabBar, Card, Flex } from 'antd-mobile';
import { connect } from 'dva';
import ast from './index.less';
import md5 from 'md5'
import { setCookie } from '../../utils/auth'
import { createForm, formShape } from 'rc-form';
import { Divider } from 'antd';
const PlaceHolder = ({ className = '', ...restProps }) => (
  <div className={`${className} placeholder`} {...restProps}>Block</div>
);
class StuIndex extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      initData: '',
      show: false,
      selectedTab: 'redTab',
      hidden: false,
      fullScreen: false
    };
  }
  componentWillMount() {
    this.props.dispatch({ type: "stuIndexModule/loadStuInfo", payload: {} })
}
  onChange = (value) => {
    let label = '';
  }
  handleClick = (e) => {
    e.preventDefault(); // Fix event propagation on Android
    this.setState({
      show: !this.state.show,
    });
  }

  onMaskClick = () => {
    this.setState({
      show: false,
    });
  }

  render() {
    const { initData, show } = this.state;
    return (
      <div className={show ? ast.menu_active : ''}>
        <div><img src={require('../../assets/banner.jpg')} className={ast.banner} /></div>
        <WingBlank size="lg" >
          <WhiteSpace size="lg" />
          <Card>
            <Card.Header
              title="你好！李华！"
              thumb="https://gw.alipayobjects.com/zos/rmsportal/MRhHctKOineMbKAZslML.jpg"
            />
            <Card.Body>
              <div className={ast.card}>
                <div>我的学号：{this.props.studentInfo.Msg.username}</div>
                <div>我的专业：{this.props.studentInfo.Msg.orgName}</div>
                <div>我的导师：</div>
                <div>一卡通号：032018010101</div>
                <div>我的题目：基于云计算的文字识别算法研究和实现</div>
              </div>
            </Card.Body>

          </Card>
          <WhiteSpace size="lg" />
          <Flex style={{ overflow: 'visible' }}>
            <Flex.Item>
              <div className={ast.index_box}>
                <img src={require('../../assets/index_icon_01.png')} />
                <p className={ast.Grouptitle}>培 养</p>
                <div>
                  {this.props.loadStuInfoList == undefined ? null : this.props.loadStuInfoList.cultivatePlanFinsh == '已完成' ? <p className={ast.fontstyleGreen}><i className='icon-wancheng iconfont'></i>培养计划制定</p> : <p className={ast.fontstyleRed}><i className='icon-weiwancheng iconfont'></i>培养计划制定</p>}
                  {this.props.loadStuInfoList == undefined ? null : this.props.loadStuInfoList.cultivateCreditFinsh == '已完成' ? <p className={ast.fontstyleGreen}><i className='icon-wancheng iconfont'></i>培养计划完成</p> : <p className={ast.fontstyleRed}><i className='icon-weiwancheng iconfont'></i>培养计划完成</p>}
                  {this.props.loadStuInfoList == undefined ? null : this.props.loadStuInfoList.cultivatePracticeFinsh == '已完成' ? <p className={ast.fontstyleGreen}><i className='icon-wancheng iconfont'></i>实践环节完成</p> : <p className={ast.fontstyleRed}><i className='icon-weiwancheng iconfont'></i>实践环节完成</p>}
                  
                </div>
              </div>
            </Flex.Item>
            <Flex.Item>
              <div className={ast.index_box}>
                <img src={require('../../assets/index_icon_02.png')} />
                <p className={ast.Grouptitle}>论 文</p>
                <div>
                {this.props.loadStuInfoList == undefined ? null : this.props.loadStuInfoList.cultivateOpenFinsh == '已完成' ? <p className={ast.fontstyleGreen}><i className='icon-wancheng iconfont'></i>开题</p> : <p className={ast.fontstyleRed}><i className='icon-weiwancheng iconfont'></i>开题</p>}
                {this.props.loadStuInfoList == undefined ? null : this.props.loadStuInfoList.cultivateMeduimFinsh == '已完成' ? <p className={ast.fontstyleGreen}><i className='icon-wancheng iconfont'></i>中期</p> : <p className={ast.fontstyleRed}><i className='icon-weiwancheng iconfont'></i>开题</p>}
                {this.props.loadStuInfoList == undefined ? null : this.props.loadStuInfoList.cultivateRejoinFinsh == '已完成' ? <p className={ast.fontstyleGreen}><i className='icon-wancheng iconfont'></i>答辩</p> : <p className={ast.fontstyleRed}><i className='icon-weiwancheng iconfont'></i>答辩</p>}
               
                </div>
              </div>
            </Flex.Item>
          </Flex>
          <WhiteSpace size="lg" />
          <Flex style={{ overflow: 'visible' }}>
            <Flex.Item>
              <div className={ast.index_box}>
                <img src={require('../../assets/index_icon_03.png')} />
                <p className={ast.Grouptitle}>学 位</p>
                <div>
                {this.props.loadStuInfoList == undefined ? null : this.props.loadStuInfoList.degreeConfirm == '已完成' ? <p className={ast.fontstyleGreen}><i className='icon-wancheng iconfont'></i>学位确认</p> : <p className={ast.fontstyleRed}><i className='icon-weiwancheng iconfont'></i>学位确认</p>}
                {this.props.loadStuInfoList == undefined ? null : this.props.loadStuInfoList.degreeApply == '已完成' ? <p className={ast.fontstyleGreen}><i className='icon-wancheng iconfont'></i>学位申请</p> : <p className={ast.fontstyleRed}><i className='icon-weiwancheng iconfont'></i>学位申请</p>}
                {this.props.loadStuInfoList == undefined ? null : this.props.loadStuInfoList.resDegreeAcquireFinsh == '已完成' ? <p className={ast.fontstyleGreen}><i className='icon-wancheng iconfont'></i>获得学位</p> : <p className={ast.fontstyleRed}><i className='icon-weiwancheng iconfont'></i>获得学位</p>}
                
                </div>
              </div>
            </Flex.Item>
            <Flex.Item>
              <div className={ast.index_box}>
                <img src={require('../../assets/index_icon_04.png')} />
                <p className={ast.Grouptitle}>学 历</p>
                <div>
                {this.props.loadStuInfoList == undefined ? null : this.props.loadStuInfoList.educationConfim == '已完成' ? <p className={ast.fontstyleGreen}><i className='icon-wancheng iconfont'></i>学历确认</p> : <p className={ast.fontstyleRed}><i className='icon-weiwancheng iconfont'></i>学历确认</p>}
                {this.props.loadStuInfoList == undefined ? null : this.props.loadStuInfoList.educationApply == '已完成' ? <p className={ast.fontstyleGreen}><i className='icon-wancheng iconfont'></i>学历申请</p> : <p className={ast.fontstyleRed}><i className='icon-weiwancheng iconfont'></i>学历申请</p>}
                </div>
              </div>
            </Flex.Item>
          </Flex>
          <WhiteSpace size="lg" />
        </WingBlank>
      </div>

    );
  }
}
function mapStateToProps(state) {
  return {
    studentInfo: state.auth.userInformation,
    loadStuInfoList:state.stuIndexModule.loadStuInfoList
  }
} 
export default connect(mapStateToProps)(StuIndex);
